<template>
  <yd-layout title="Dialog">

    <yd-button-group>

      <yd-button @click.native="openConfrim"
                 size="large">Confirm</yd-button>

      <yd-button @click.native="openCustomConfrim"
                 size="large">Confirm->Custom</yd-button>

      <yd-button @click.native="openAlert"
                 size="large"
                 type="hollow">Alert</yd-button>

      <yd-button @click.native="toastSuccess"
                 size="large"
                 type="danger">Toast->Success</yd-button>

      <yd-button @click.native="toastError"
                 size="large"
                 type="danger">Toast->Error</yd-button>

      <yd-button @click.native="toastNone"
                 size="large"
                 type="danger">Toast->None</yd-button>

      <yd-button @click.native="openLoading"
                 size="large"
                 type="hollow">Loading</yd-button>

      <yd-button @click.native="openNotify"
                 size="large"
                 type="hollow">Notify</yd-button>

      <yd-button @click.native="showConfirmView = true"
                 size="large"
                 type="hollow">以view组件方式进行展示</yd-button>
    </yd-button-group>

    <yd-confirm-view v-if="showConfirmView"
                     title="提示"
                     mes="beforeRouteLeave通过api方式调用无效"
                     :opts="confirmOpts">

    </yd-confirm-view>
  </yd-layout>
</template>

<script type="text/babel">
export default {
  data() {
    return {
      shouldLeave: false,
      showConfirmView: false,
      confirmOpts: [
        { txt: '取消', color: '#909090' },
        {
          txt: '确定',
          color: '#568bf1',
          callback: () => {
            this.shouldLeave = true; //允许离开
            this.showConfirmView = false;
          }
        }
      ]
    };
  },

  beforeRouteLeave(to, from, next) {
    if (!this.shouldLeave) {
      this.showConfirmView = true;
      next(false);
    } else {
      next();
    }
  },

  methods: {
    openConfrim() {
      this.$dialog.confirm({
        title: '选填标题',
        mes: '我有一个小毛驴我从来也不骑！',
        opts: () => {
          this.$dialog.toast({ mes: '你点了确定', timeout: 1000 });
        }
      });
    },
    openCustomConfrim() {
      this.$dialog.confirm({
        title: '选填标题',
        mes: '我有一个小毛驴我从来也不骑！',
        opts: [
          {
            txt: '取消',
            color: false,
            callback: () => {
              this.$dialog.toast({ mes: '你点了取消', timeout: 1000 });
            }
          },
          {
            txt: '犹豫一下',
            stay: true,
            color: '#CCC',
            callback: () => {
              this.$dialog.toast({ mes: '别犹豫了', timeout: 1000 });
            }
          },
          {
            txt: '确定',
            color: true,
            callback: () => {
              this.$dialog.toast({ mes: '你点了确定', timeout: 1000 });
            }
          }
        ]
      });
    },
    openAlert() {
      this.$dialog.alert({ mes: '消息一出，休想滚动屏幕[移动终端]！' });
    },
    toastSuccess() {
      this.$dialog.toast({
        mes: '保存成功',
        timeout: 1500,
        icon: 'success'
      });
    },
    toastError() {
      this.$dialog.toast({
        mes: '保存失败',
        timeout: 1500,
        icon: 'error',
        callback: () => {
          this.$dialog.alert({ mes: '给你一次重来的机会！' });
        }
      });
    },
    toastNone() {
      this.$dialog.toast({
        mes: '一个没有任何图标的提示！',
        timeout: 1500
      });
    },
    openLoading() {
      this.$dialog.loading.open('很快加载好了');

      setTimeout(() => {
        this.$dialog.loading.close();
      }, 2000);
    },
    openNotify() {
      this.$dialog.notify({
        mes: '5秒后自动消失，点我也可以消失！',
        timeout: 5000,
        callback: () => {
          console.log('我走咯！');
        }
      });
    }
  }
};
</script>

<style scoped>
.yd-button > button {
  margin-top: 0.2rem;
}
</style>

